<template>
  <div class="main">
      <component :is="currentComponent" style="padding:0"></component>
      <div  id="hide">
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label" class="labelcolor">账单管理</span>
        <div class="block" style="margin-bottom: 20px">
          <span class="demonstration">统计时间：</span>
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            start-placeholder="请选择时间范围开始"
            end-placeholder="请选择时间范围结束"
            :default-time="['12:00:00']"
          >
          </el-date-picker>
          <el-button type="primary" size="medium" style="margin-left: 20px"
            >确定</el-button
          >
        </div>

        <el-table :data="billData" border style="width: 100%">
          <el-table-column fixed prop="number" label="账单编号" width="125">
          </el-table-column>
          <el-table-column prop="site" label="所属工地" width="120">
          </el-table-column>
          <el-table-column prop="receipttime" label="接收时间">
          </el-table-column>
          <el-table-column prop="paymenttime" label="付款时间">
          </el-table-column>
          <el-table-column prop="billingcycle" label="结算周期" width="120">
          </el-table-column>
          <el-table-column
            prop="settlementamount"
            label="结算金额（元）"
            width="100"
          >
          </el-table-column>
          <el-table-column prop="state" label="状态"> </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <span v-if="scope.row.state === '已发送，待确认'"
                ><el-button @click="handleClick()" type="text" size="small"
                  >确认</el-button
                >
                <!-- @click="billdetailp()" -->
                <el-button
                  type="text"
                  size="small"
                  @click="change('Billdetailpre')"
                  >对账单明细</el-button
                ></span
              >
              <span v-if="scope.row.state === '已确认，待付款'"
                ><el-button
                  @click="change('payment')"
                  type="text"
                  size="small"
                  >付款</el-button
                >
                <el-button type="text" size="small" @click="change('Billdetailpre')"
                  >对账单明细</el-button
                ></span
              >
              <span v-if="scope.row.state === '已付款，待确认'"
                ><el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >修改付款信息</el-button
                >
                <el-button type="text" size="small" @click="change('Billdetailmon')"
                  >对账单明细</el-button
                ></span
              >
              <span v-if="scope.row.state === '已完成'">
                <el-button type="text" size="small"   @click="change('Billdetailmon')"
                  >对账单明细</el-button
                ></span
              >
              <!-- <el-button @click="handleClick(scope.row)" type="text">确认</el-button>
        <el-button type="text" >对账单明细</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: "1",
      value1: "",
      currentComponent: "",
      billData: [
        {
          number: "ZD2018110612",
          site: "旭辉运河悦章",
          receipttime: "2018-11-06 17:14:00",
          paymenttime: "2018-11-06 17:14:00",
          billingcycle: "2018-10-06 ~ 2018-11-06",
          settlementamount: "60000.00",
          state: "已发送，待确认",
        },
        {
          number: "ZD2018110612",
          site: "旭辉运河悦章",
          receipttime: "2018-11-06 17:14:00",
          paymenttime: "2018-11-06 17:14:00",
          billingcycle: "2018-10-06 ~ 2018-11-06",
          settlementamount: "60000.00",
          state: "已确认，待付款",
        },
        {
          number: "ZD2018110612",
          site: "旭辉运河悦章",
          receipttime: "2018-11-06 17:14:00",
          paymenttime: "2018-11-06 17:14:00",
          billingcycle: "2018-10-06 ~ 2018-11-06",
          settlementamount: "60000.00",
          state: "已完成",
        },
        {
          number: "ZD2018110612",
          site: "旭辉运河悦章",
          receipttime: "2018-11-06 17:14:00",
          paymenttime: "2018-11-06 17:14:00",
          billingcycle: "2018-10-06 ~ 2018-11-06",
          settlementamount: "60000.00",
          state: "已付款，待确认",
        },
      ],
    };
  },
  components: {
    Billdetailpre(resolve) {
      require(["./Billdetailspre.vue"], resolve);
    },
      Billdetailmon(resolve) {
      require(["./Billdetailsmon.vue"], resolve);
    },
     payment(resolve) {
      require(["./payment.vue"], resolve);
    },
    // ，组件名(resolve) {require(["./组件名.vue"], resolve); }
  },
  methods: {
    change(name) {
      this.currentComponent = name;
       document.getElementById("hide").style.display = "none";


    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },

    handleClick() {
      //  window.location.href='/Billdetailsmonth'
      // console.log("成功");
      // <el-alert title="成功提示的文案" type="success"></el-alert>;
    },
  },
};
</script>
<style src="../style/mine.css">
</style>